<template>
	<view>
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">消息中心</block>
		</cu-custom>
		<view class="selectList">
			<view class="btn" @click="changeTab(index)" :class="{active:tabIndex==index}" v-for="(item,index) in readList" :key="index">
				{{item}}
			</view>
		</view>
		<view class="messageList">
			<view class="list" v-for="(item,index) in list" :key="index" v-if="isHave">
				<image src="../../../static/img/basics/u4620.png" mode="" class="icons"></image>
				<view class="message">
					<view class="top">
						<view class="title">{{item.title}}</view>
						<view class="time">{{item.createTime}}</view>
					</view>
					<view class="bottom">
						<text>{{item.content}}</text>
					</view>
				</view>
			</view>
			<view v-if="!isHave" class="no-data">
				暂无数据
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabIndex:0,//頂部
				readList:['未读','已读'],//頂部//頂部
				 list:[],//list列表
				 isHave:true//是否有數據
			}
		},
		onLoad(){
			this.getUnReadMessage();
		},
		methods: {
			changeTab(index){
				this.tabIndex = index
				switch(index){
					case 0:
						this.getUnReadMessage()
						if(this.$store.state.state&&this.$store.state.isphone){
								getApp().globalData.TTSSpeaker.stop();
								getApp().globalData.TTSSpeaker.speak(`未读`,1);
						}	
					break;
					case 1:
						this.getReadMessage()
						if(this.$store.state.state&&this.$store.state.isphone){
								getApp().globalData.TTSSpeaker.stop();
								getApp().globalData.TTSSpeaker.speak(`已读`,1);
						}	
					break;
				}
			},
			// ###获取未读消息
			// GET {{baseUrl}}/{{care-service}}/myMessage/getUnReadMessage?teamId=202011130000006
			// Authorization: {{token}}
			getUnReadMessage(){
				let param = {}
				param.teamId = uni.getStorageSync('teamId')
				this.$http('/care-service/myMessage/getUnReadMessage','get',param).then(res=>{
					if(res.data.code==200){
						this.isHave  = true
						if(res.data.data.records.length>0){
							this.list = res.data.data.records
						}else{
							this.isHave  = false
						}
					}
				});
			},
			// ###获取已读消息
			// GET {{baseUrl}}/{{care-service}}/myMessage/getReadMessage?teamId=202011130000006
			// Authorization: {{token}}
			getReadMessage(){
				let param = {}
				param.teamId = uni.getStorageSync('teamId')
				this.$http('/care-service/myMessage/getReadMessage','get',param).then(res=>{
					if(res.data.code==200){
						this.isHave  = true
						if(res.data.data.records.length>0){
							this.list = res.data.data.records
						}else{
							this.isHave  = false
						}
					}
				});
			},
			
			
		}
	}
</script>

<style lang="scss">
	.selectList{
		width: 100%;
		height: 70rpx;
		background: #ddd;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		.btn{
			width: 100rpx;
			text-align: center;
			line-height: 66rpx;
		}
		.active{
			border-bottom: 1px solid #F37B1D;
			color: #F37B1D;
		}
	}
	.messageList{
		margin-top: 70rpx;
		box-sizing: border-box;
		padding: 0 32rpx;
		.list{
			width: 100%;
			height: auto;
			display: flex;
			padding-top: 20rpx;
			.icons{
				width: 70rpx;
				height: 70rpx;
				margin-top: 60rpx;
			}
			.message{
				flex: 1;
				margin-left: 20rpx;
				border-bottom: 1px solid #e5e5e5;
				padding-bottom: 20rpx;
				.top{
					width: 100%;
					height: 60rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 28rpx;
					.time{
						color: #ccc;
						font-size: 24rpx;
					}
				}
				.bottom{
					text{
						font-size: 28rpx;
					}
				}
			}
		}
	}
</style>
